<template>
  <div v-loading="loading" class="parentStyle">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('姓名')" prop="name">
            <el-input v-model="form.name" :placeholder="$t('姓名')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('性别')" prop="gender">
            <el-input v-model="form.gender" :placeholder="$t('性别')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('年龄')" prop="age">
            <el-input v-model="form.age" :placeholder="$t('年龄')" show-word-limit maxlength="5" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('婚姻状态')">
            <el-input v-model="form.maritalStatus" :placeholder="$t('婚姻状态')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('出生日期')" prop="birthday">
            <el-date-picker
              v-model="form.birthday"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('出生日期')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('邮箱')" prop="email">
            <el-input v-model="form.email" :placeholder="$t('邮箱')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('电话号码')" prop="phone">
            <el-input v-model="form.phone" :placeholder="$t('电话号码')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('QQ号')" prop="qq">
            <el-input v-model="form.qq" :placeholder="$t('QQ号')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('微信号')" prop="weixin">
            <el-input v-model="form.weixin" :placeholder="$t('微信号')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('户口地址')" prop="hukouAddress">
            <el-input v-model="form.hukouAddress" :placeholder="$t('户口地址')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('籍贯地址')" prop="hometownAddress">
            <el-input v-model="form.hometownAddress" :placeholder="$t('籍贯地址')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('身份证号')" prop="idCard">
            <el-input v-model="form.idCard" :placeholder="$t('身份证号')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('民族')" prop="race">
            <el-input v-model="form.race" :placeholder="$t('民族')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('国籍')" prop="nationality">
            <el-input v-model="form.nationality" :placeholder="$t('国籍')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('政治面貌')">
            <el-input v-model="form.politStatus" :placeholder="$t('政治面貌')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('语言能力')" prop="languages">
            <el-input v-model="form.languages" :placeholder="$t('语言能力')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('英语水平')" prop="englishLevel">
            <el-input v-model="form.englishLevel" :placeholder="$t('英语水平')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('计算机水平')" prop="computerLevel">
            <el-input v-model="form.computerLevel" :placeholder="$t('计算机水平')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('博客/主页地址')" prop="blog">
            <el-input v-model="form.blog" :placeholder="$t('博客/主页地址')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('工作年限')" prop="workYear">
            <el-input v-model="form.workYear" :placeholder="$t('工作年限')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('参加工作时间')" prop="workStartTime">
            <el-date-picker
              v-model="form.workStartTime"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('参加工作时间')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('当前职位')" prop="workPosition">
            <el-input v-model="form.workPosition" :placeholder="$t('当前职位')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('当前单位')" prop="workCompany">
            <el-input v-model="form.workCompany" :placeholder="$t('当前单位')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('所处行业')" prop="workIndustry">
            <el-input v-model="form.workIndustry" :placeholder="$t('所处行业')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('在职状态')">
            <el-input v-model="form.workStatus" :placeholder="$t('在职状态')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('当前薪资')" prop="workSalary">
            <Money v-model="form.workSalary" :placeholder="$t('当前薪资')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('工作地点')" prop="workLocation">
            <el-input v-model="form.workLocation" :placeholder="$t('工作地点')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('工作性质')" prop="workJobNature">
            <el-input v-model="form.workJobNature" :placeholder="$t('工作性质')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('毕业时间')" prop="gradTime">
            <el-date-picker
              v-model="form.gradTime"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('毕业时间')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('毕业学校')" prop="college">
            <el-input v-model="form.college" :placeholder="$t('毕业学校')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('毕业学校类型')">
            <el-select v-model="form.collegeType" value="" :placeholder="$t('毕业学校类型')">
              <el-option
                v-for="dict in collegeTypeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('毕业院系')" prop="collegeDept">
            <el-input v-model="form.collegeDept" :placeholder="$t('毕业院系')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('所学专业')" prop="major">
            <el-input v-model="form.major" :placeholder="$t('所学专业')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('学历')" prop="degree">
            <el-input v-model="form.degree" :placeholder="$t('学历')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('是否统招')" prop="recruit">
            <el-input v-model="form.recruit" :placeholder="$t('是否统招')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('所在城市')" prop="city">
            <el-input v-model="form.city" :placeholder="$t('所在城市')" show-word-limit maxlength="25" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('当前所在地')" prop="livingAddress">
            <el-input v-model="form.livingAddress" :placeholder="$t('当前所在地')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('期望工作')" prop="expectJob">
            <el-input v-model="form.expectJob" :placeholder="$t('期望工作')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('期望工作单位')" prop="expectCpy">
            <el-input v-model="form.expectCpy" :placeholder="$t('期望工作单位')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('期望薪资')" prop="expectSalary">
            <Money v-model="form.expectSalary" :placeholder="$t('期望薪资')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('期望行业')" prop="expectIndustry">
            <el-input v-model="form.expectIndustry" :placeholder="$t('期望行业')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('到岗时间')" prop="expectTime">
            <el-date-picker
              v-model="form.expectTime"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('到岗时间')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('期望工作性质')" prop="expectJnature">
            <el-input v-model="form.expectJnature" :placeholder="$t('期望工作性质')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('当前离职/在职状态')">
            <el-input v-model="form.expectJstatus" :placeholder="$t('当前离职/在职状态')" show-word-limit maxlength="50" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('期望工作地址')" prop="expectJlocation">
            <el-input v-model="form.expectJlocation" :placeholder="$t('期望工作地址')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="fileId" :label="$t('上传简历')">
            <el-upload
              class="upload-resume"
              :multiple="false"
              :headers="upload.headers"
              :action="upload.url"
              :limit="1"
              :show-file-list="true"
              :on-success="ocrUploadSuccess"
              :on-exceed="fileOnExceed"
              :auto-upload="true"
              style="color: #1890ff;"
              :file-list="form.fileBaseList"
              :on-preview="onPreview"
              drag
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">{{ $t('将文件拖到此处，或') }}<em>{{ $t('点击上传') }}</em></div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="oa:resume" />
    </div>

    <!-- 预览附件 -->
    <OnlinePreview ref="OnlinePreview" />
  </div>
</template>

<script>
    import { saveResumeBase, getResumeBase } from '@/api/oa/resume/resumeBase'
    import { getToken } from '@/utils/auth'
    import { config } from '@/utils'
    export default {
        data() {
            return {
                // 表单参数
                form: {
                  fileBaseList: []
                },
                uploadSuccess: true,
                // 毕业院校类型
                collegeTypeOptions: [],
                // 遮罩层
                loading: false,
                // 简历上传参数
                upload: {
                  // 设置上传的请求头部
                  headers: { Authorization: 'Bearer ' + getToken() },
                  // 上传的地址
                  url: config.baseURL + '/resume/resumeBase/uploadResume'
                },
                // 表单校验
                rules: {
                  name: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                  gender: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                  phone: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
                }
            }
        },
        created() {
          // 毕业院校类型
          this.getDicts('college_type').then(response => {
            this.collegeTypeOptions = response.data
          })
        },
        mounted() {
          this.$bus.$emit('async_done')
        },
        methods: {
              // 初始化数据
            init(data) {
                if (data != null && data.id !== undefined) {
                    this.loading = true
                    getResumeBase(data.id).then(response => {
                        this.form = response.data
                        this.loading = false
                    })
                } else {
                    this.reset()
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    name: undefined,
                    gender: undefined,
                    age: undefined,
                    maritalStatus: undefined,
                    birthday: undefined,
                    email: undefined,
                    phone: undefined,
                    qq: undefined,
                    weixin: undefined,
                    hukouAddress: undefined,
                    hometownAddress: undefined,
                    idCard: undefined,
                    race: undefined,
                    nationality: undefined,
                    politStatus: undefined,
                    languages: undefined,
                    englishLevel: undefined,
                    computerLevel: undefined,
                    blog: undefined,
                    workYear: undefined,
                    workStartTime: undefined,
                    workPosition: undefined,
                    workCompany: undefined,
                    workIndustry: undefined,
                    workStatus: undefined,
                    workSalary: undefined,
                    workLocation: undefined,
                    workJobNature: undefined,
                    gradTime: undefined,
                    college: undefined,
                    collegeType: undefined,
                    collegeDept: undefined,
                    major: undefined,
                    degree: undefined,
                    recruit: undefined,
                    city: undefined,
                    livingAddress: undefined,
                    expectJob: undefined,
                    expectCpy: undefined,
                    expectSalary: undefined,
                    expectIndustry: undefined,
                    expectTime: undefined,
                    expectJnature: undefined,
                    expectJstatus: undefined,
                    expectJlocation: undefined,
                    remark: undefined,
                    createBy: undefined,
                    updateBy: undefined,
                    createTime: undefined,
                    updateTime: undefined,
                    delFlag: undefined,
                    fileId: undefined,
                    fileBaseList: []
                }
                this.resetForm('form')
            },
            // 附件上传成功回调
            ocrUploadSuccess(resp) {
              if (resp.code === 200) {
                this.form.fileId = resp.data
                this.$message.success(this.$t('上传成功'))
                this.uploadSuccess = false
              }
            },
            // 超出文件数量限制时触发的方法
            fileOnExceed() {
              this.$message.error(this.$t('请删除文件后上传'))
            },
            onPreview() {
              this.$refs.OnlinePreview.onlinePreviewFile(this.form.fileId, 'view')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveResumeBase(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                })
           }

        }

    }
</script>
